<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .cssanimation,
      .cssanimation span {
        animation-duration: 1s;
        animation-fill-mode: both;
      }

      .cssanimation span {
        display: inline-block;
      }

      .lePeek span {
        animation-name: lePeek;
      }
      @keyframes lePeek {
        25% {
          transform: rotateX(30deg) translateY(10px) rotate(-13deg);
        }
        50% {
          transform: translateY(-22px) rotate(3deg) scale(1.1);
        }
      }
    </style>
  </head>
  <body>
    <div class="cssanimation lePeek sequence">aaaaa</div>

    <script>
      window.onload = function () {
        animateSequence();
        animateRandom();
      };

      function animateSequence() {
        var a = document.getElementsByClassName("sequence");
        for (var i = 0; i < a.length; i++) {
          var $this = a[i];
          var letter = $this.innerHTML;
          letter = letter.trim();
          var str = "";
          var delay = 100;
          for (l = 0; l < letter.length; l++) {
            if (letter[l] != " ") {
              str +=
                '<span style="animation-delay:' +
                delay +
                "ms; -moz-animation-delay:" +
                delay +
                "ms; -webkit-animation-delay:" +
                delay +
                'ms; ">' +
                letter[l] +
                "</span>";
              delay += 150;
            } else str += letter[l];
          }
          $this.innerHTML = str;
        }
      }

      function animateRandom() {
        var a = document.getElementsByClassName("random");
        for (var i = 0; i < a.length; i++) {
          var $this = a[i];
          var letter = $this.innerHTML;
          letter = letter.trim();
          var delay = 70;
          var delayArray = new Array();
          var randLetter = new Array();
          for (j = 0; j < letter.length; j++) {
            while (1) {
              var random = getRandomInt(0, letter.length - 1);
              if (delayArray.indexOf(random) == -1) break;
            }
            delayArray[j] = random;
          }
          for (l = 0; l < delayArray.length; l++) {
            var str = "";
            var index = delayArray[l];
            if (letter[index] != " ") {
              str =
                '<span style="animation-delay:' +
                delay +
                "ms; -moz-animation-delay:" +
                delay +
                "ms; -webkit-animation-delay:" +
                delay +
                'ms; ">' +
                letter[index] +
                "</span>";
              randLetter[index] = str;
            } else randLetter[index] = letter[index];
            delay += 80;
          }
          randLetter = randLetter.join("");
          $this.innerHTML = randLetter;
        }
      }

      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
    </script>
  </body>
</html>
